<template>
	<view :set="set" v-show="status">
		<view style="width: 100%;height: 50px;" v-if="set.bottom==1"></view>
		<view class="comment" :style="set.bottom==1?'position: fixed;left: 0;bottom: 0;':''">
			<view class="comment-left">
				<div class="comment-icon" v-if="set.index_btn&&set.index_btn==1" @click="navto('index')">
					<u-icon name="home" size="22"></u-icon>
					<text>首页</text>
				</div>
				<div class="comment-icon" >
					<u-icon name="share" size="22"></u-icon>
					<text>分享</text>
					<share></share>
				</div>
				<div class="comment-icon" v-if="set.tel.length" @click="call()">
					<u-icon name="phone" size="22"></u-icon>
					<text>联系</text>
				</div>
				<div class="comment-icon" @click="open()">
					<u-icon name="chat" size="22"></u-icon>
					<view style="position: absolute;left: 18px;padding: 2px;background: #fff;line-height: 11px;
					border-radius: 25px;
					top: -4px;font-size: 11px;color: #666">
						<template v-if="content.comment_count>999">999+</template>
						<template v-else>{{content.comment_count}}</template>
					</view>
					<text>评论</text>
				</div>
			</view>
			<view class="comment-right" style="flex: 1;" @click="open()">
				<div class="comment-input">
						<view style="margin-right: 3px;"><u-icon name="edit-pen" size="15"></u-icon> </view>
					{{set.text}} 
				</div>
			</view>
		</view>
		<!-- #ifdef MP-BAIDU -->
		<view v-show="baidushow">
		<!-- #endif -->
		<!-- #ifndef MP-BAIDU -->
		<view>
		<!-- #endif -->
			<u-popup :show="show" @close="close()" :round="10" closeable>
				<view style="height: 550px;">
					<view style="padding: 10px;font-size: 13px;color: #333;display: flex;flex-direction: row;margin-top: 4px;">
					<u-icon name="more-dot-fill"></u-icon>	<text style="margin-left: 5px;;">共{{content.comment_count}}条评论</text>
					</view>
					<scroll-view scroll-y @scrolltolower="scrolltolower"
					 style="height: 460px;">
						<view class="con" >
							<view style="height: 450px;display: flex;justify-content: center;" v-if="!data.length">
								<u-empty mode="message" text="当前还没有评论哦!">	 </u-empty>
							</view>
							<view class="con-li" v-for="(list,key) in data">
								<view class="comment-icon">
									<image class="icon-big" :src="list.icon"
									 lazy-load></image>
								</view>
								<view class="con-right">
									<view class="name-box">
										<view>
											<text class="name">{{list.showname}}</text>
											<text class="name-tag" v-if="content&&content.uid&&userinfo.id&&userinfo.id==content.uid">作者</text>
											<text class="name-tag" v-if="list.is_first==1" style="background: #bbc0c8 ;">首评</text>
										</view>
										<text class="del" v-if="userinfo.id&&userinfo.id==list.uid" @click="del(key,false)">删除</text>
									</view>
									<view class="content">
										{{list.content}}
									</view>
									<view class="bottom">
										<view class="left">
											<view class="date">{{$u.timeFormat(list.c_time)}}</view>
										    <view class="city" v-if="list.address!='未知'">{{list.address}}</view>
											<view class="huifu" @click="huifu(list)">
												<u-icon name="chat"></u-icon>
												<text>回复</text>
											</view>
										</view>
										<view class="right">
											<view class="zan" @click="zan(key,false,'praise')">
												<u-icon :name="list.is_praise==1?'thumb-up-fill':'thumb-up'" size="18"></u-icon> 
												<text>
													{{list.praise}}
												</text>
											</view>
											<view class="zan" style="margin-left: 10px;"  @click="zan(key,false,'dislike')">
												<u-icon :name="list.is_dislike?'thumb-down-fill':'thumb-down'" size="18"></u-icon> 
												<text>
													{{list.dislike}}
												</text>
											</view>
										</view>
									</view>
									<view v-if="list.num>0">
										<view class="count" @click="get_reply(key)" v-if="list.son_list.length==0">
											<text>{{list.num}}条回复</text> 
											<view style="margin-top: 1px;">
												<u-icon size="18" name="arrow-down" color="#666"></u-icon>
											</view>
										</view>
										<view style="height: 1px;border-top: #f6f6f9 1px solid;margin: 4px 0;" v-else></view>
										<view class="con-li" v-for="(l,k) in list.son_list" style="margin-bottom: 10px;" v-if="list.son_list.length">
											<view class="comment-icon" style="margin-right: 0;">
												<image class="icon-big" style="width: 20px;height: 20px" :src="l.icon"
												 lazy-load></image>
											</view>
											<view class="con-right" style="margin-right: 0;margin-top: 3px;">
												<view class="name-box">
													<view>
														<text class="name">{{l.showname}}</text>
														<text class="name-tag" :style="'background: '+app_color" v-if="l.uid==list.uid">楼主</text>
													</view>
													<text class="del" v-if="userinfo.id&&userinfo.id==l.uid" @click="del(key,k)">删除</text>
												</view>
												<view class="content" style="width:calc(750rpx - 110px);">
													{{l.content}}
												</view>
												<view class="bottom">
													<view class="left">
														<view class="date">{{$u.timeFormat(l.c_time)}}</view>
														<view class="city">{{l.address}}</view>
														
													</view>
													<view class="right">
														<view class="zan" @click="zan(key,k,'praise')">
															<u-icon :name="l.is_praise==1?'thumb-up-fill':'thumb-up'" size="18"></u-icon> 
															<text>
																{{l.praise}}
															</text>
														</view>
														<view class="zan" style="margin-left: 10px;"
														  @click="zan(key,k,'dislike')">
															<u-icon :name="l.is_dislike?'thumb-down-fill':'thumb-down'" size="18"></u-icon> 
															<text>
																{{l.dislike}}
															</text>
														</view>
													</view>
												</view>
											</view>
										</view>
										<view style="display: flex;justify-content: center;" @click="get_reply(key)"
										v-if="list.son_list.length>0&&list.son_list.length<list.num">
											<view style="margin-right: 4px;">
												<u-icon name="more-dot-fill"></u-icon>
											</view>
											<text style="font-size: 12px;color: #666;">
												查看更多回复
											</text>
										</view>
									</view>
								</view>
							</view>
							<view style="height: 1px;"></view>
						</view>
					</scroll-view>
					<view class="input">
						<input type="text" confirm-type="send" :focus="focus" v-model="text"
						:placeholder="set.input_text" placeholder-style="font-size:14px;margin-left:4px">
						<view class="input-icon" :style="'background:' +app_color" @click="send()">
							发送
						</view>
					</view>
				</view>
				
				<!-- #ifdef MP-BAIDU -->
				<view v-show="sonshow">
				<!-- #endif -->
				<!-- #ifndef MP-BAIDU -->
				<view>
				<!-- #endif -->
			<u-popup :show="sonshow" @close="sonshow=false" closeable>
			            <view style="height: 200px;overflow-y: auto;">
							<view style="font-size: 14px;color: #666;margin: 10px;display: flex;flex-direction: row;">
								<view style="margin-right: 5px;">
									<u-icon name="chat" size="21"></u-icon>
								</view>
								<text>回复</text>
							</view>
							<view style="padding: 10px;font-size: 11px;color: #8b8b8b;background-color: #f9f9f7;
							border: 1px #eee solid;border-radius: 4px;margin: 10px;word-wrap: break-word;">
								{{retext}}
							</view>
			             <view class="input " style="display: flex;">
			             	<textarea focus v-model="hf.text"
			             	placeholder="请输入回复内容" placeholder-style="font-size:14px;margin-left:4px;color:#9c9c9c"></textarea>
			             	<view class="input-icon huifu-input" :style="'background:' +app_color" @click="sendHuifu()">
			             		发送
			             	</view>
			             </view>
			            </view>
					</u-popup>
					</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		name:"plugin-comment",
		data() {
			return {
				baidushow:true,
				hasData:false,
				sonshow:false,
				status:false,
				show:false,
				app_color:"",
				data:[],
				focus:false,
				userinfo:{
					id:""
				},
				info:{
					page:1,
					page_num:6
				},
				hasMore:true,
				text:"",
				reid:0,
				retext:"",
				hf:{
					comment_id:"",
					text:""
				}
			};
		},props:{
			content:{//文章内容
				type:Object,
				default:()=>{
					return {
						
					}
				}
			},
			set:{
				type:Object,
				default:()=>{
					return {
						
					}
				}
			},
			type:{
				type:String,
				default:()=>{
					return 'article'
				}
			}
		},created() {
			this.$set(this,'userinfo',this.getUserInfo());
			if(this.type=='article'){
				if(!this.set.column.length){
					this.status = true;
				}else{
					for(let k in this.set.column){
						if(this.set.column[k] == this.content.column_id){
							this.status = true;
							break;
						}
					}
				}
			}else{
				this.status = true;
			}
			this.app_color = this.$appData.data.app_color
		},methods:{
			close(){
				// #ifdef MP-BAIDU
				this.baidushow = false
				// #endif
				// #ifndef MP-BAIDU
				this.show = false;
				
				// #endif
				this.sonshow=false;
				this.$forceUpdate();
			},
			del(key=false,sonKey = false){
				this.show = false;
				this.isBox('确认要删除吗？',()=>{
					let id;
					if(sonKey!==false){
						id = this.data[key].son_list[sonKey].id;
					}else{
						id = this.data[key].id;
					}
					this.moxiPost("/plugin/comment/index/index/del_comment",{id:id},(data)=>{
						this.show = true;
						if(sonKey===false){
							this.content.comment_count--;
							this.data.splice(key,1)
						}else{
							this.data[key].son_list.splice(sonKey,1);
							this.data[key].num--;
						}
						this.msg(data.hint)
					})
				},'删除后无法恢复',()=>{
					this.show = true;
				})
			},
			get_reply(key){
				let param = {
					last_id:0,
					comment_id:this.data[key].id
				}
				if(this.data[key].son_list.length){
					param.last_id = this.data[key].son_list[this.data[key].son_list.length-1].id
				}
				this.moxiPost("/plugin/comment/index/index/get_reply",param,(res)=>{
					if(res.data.length){
						for(let k in res.data){
							this.data[key].son_list.push(res.data[k])
						}
					}
					
					console.log(res);
				})
			},
			sendHuifu(){
				if(!this.hf.text.length){
					this.msg('回复内容不能为空');
					return;
				}
				this.sonshow = false;
				this.moxiPost("/plugin/comment/index/index/reply",this.hf,(res)=>{
					for(let k in this.data){
						if(this.data[k].id == this.hf.comment_id){
							this.data[k].son_list.unshift(res.data);
							this.data[k].num++;
							break;
						}
					}
					
			
					this.hf.text = "";
					this.msg(res.hint)
				})
			},
			huifu(list){
				this.retext = list.content;
				this.hf.comment_id = list.id;
				this.sonshow = true
			},
			zan(key,son_key,type){
				let data = this.data[key];
				if(son_key!==false){
					data = data.son_list[son_key];
				}
				if(!data.id){
					tis.msg('评论数据错误');
					return;
				}
				let param = {
					id:data.id,
					type:type
				}
				
				this.moxiPost("/plugin/comment/index/index/zan",param,(res)=>{
					if(son_key!==false){
						if(data['is_'+type] == 1){
							this.data[key].son_list[son_key][type]--;
							this.data[key].son_list[son_key]['is_'+type] = 0;
						}else{
							this.data[key].son_list[son_key][type]++;
							this.data[key].son_list[son_key]['is_'+type] = 1;
						}
					}else{
						if(data['is_'+type] == 1){
							this.data[key][type]--;
							this.data[key]['is_'+type] = 0;
						}else{
							this.data[key][type]++;
							this.data[key]['is_'+type] = 1;
						}
					}
					this.msg(res.hint);
				})
			},
			call(){
				uni.makePhoneCall({
					phoneNumber: this.set.tel //直接拨号
				});
			},
			scrolltolower(){
				if(this.hasMore){
					this.open(this.info.page+1)
				}
			},
			open(page){
				
				if(this.set.login==1){
					if(!this.userinfo.id){
						this.toLogin();
						return;
					}
				}
				if(!this.show){
					this.show = true;
				}
				console.log(23232);
				// #ifdef MP-BAIDU
				this.baidushow = true;
				// #endif
				if(page){
					this.info.page = page;
				}
				if(this.hasMore){
					this.info.type = this.type;
					this.info.con_id = this.content.id;
					this.moxiPost("/plugin/comment/index/index/get_comment",this.info,(data)=>{
						if(data.data.data.length){
							for(let k in data.data.data){
								this.data.push(data.data.data[k])
							}
						}
						if(data.data.allpage>data.data.page){
							this.hasMore = true;
						}else{
							this.hasMore = false;
						}
					})
				}
				
				
				
			},
			send(){
				if(!this.text.length){
					this.msg("评论不能为空");
					return;
				}
				this.moxiPost("/plugin/comment/index/index/add",{type:this.type,reid:0,text:this.text,con_id:this.content.id},(data)=>{
					this.data.unshift(data.data);
					this.text = "";
					this.msg(data.hint)
				})
			},
			
		}
	}
</script>

<style>
	.con-li{
		display: flex;flex-direction: row;margin-bottom: 20px;justify-content: space-between;
	}
	.comment-icon{
		width: 30px;flex-shrink: 0;display: flex;flex-direction: column;height: 30px;position: relative;
	}
	.icon-big{
		width: 30px;height: 30px;border-radius: 100px;
	}
	.con-right{
		display: flex;flex-direction: column;flex: 1;margin-right: 10px;
	}
	.name{font-size: 12px;color: #666;}
	.content{
		font-size: 14px;color: #333;margin: 5px 0;width:calc(750rpx - 75px);
		word-wrap: break-word;
	}
	.bottom{
		display: flex;flex-direction: row;justify-content: space-between;color: #666;font-size: 13px;
	}
	.left{
		display: flex;flex-direction: row;
	}
	.date{
		font-size: 12px;
	}
	.city{
		margin-left: 8px;font-size: 12px;color: #666
	}
	.city::before{
		content: '';display: inline-block;margin-right: 8px;margin-bottom: 4px;width: 2px;height: 2px;
		background-color: #666;border-radius: 100px;
	}
	.name-tag{
		padding:1px 2px;border-radius: 3px;background: red;
		color: #fff;font-size: 11px;margin-left: 4px;
	}
	.huifu{
		margin-left: 8px;display: flex;flex-direction: row;
	}
	.huifu text{margin-left: 2px;}
	.right{
		display: flex;flex-direction: row;justify-content: space-between;
	}
	.zan{
		display: flex;flex-direction: row;
	}
	.name-box{
		display: flex;flex-direction: row;justify-content: space-between;
	}
	.count{
		font-size: 14px;color: #666;text-align: center;margin: 10px 0;display: flex;flex-direction: row;justify-content: center;
	}
	.count::before{
		content: '';width: 30px;height: 2px;border-bottom: #eee 1px solid;margin-top: 6px;margin-right: 5px;;
	}
	.count text{margin-right: 4px;}
	

	.input{
		position: relative;border-top: 1px #eee solid;
	}
	.input input{
		background: #f8f8f8;border-radius: 25px;padding: 4px 70px 4px 10px;height: 28px;margin: 5px 10px;
		color: #636363;font-size: 14px;
	}
	.input-icon{
		position: absolute;right: 15px;top: 10px;padding: 3px 13px;
		color: #fff;border-radius: 25px;font-size: 14px;;
	}
	.input textarea{
		height: 60px;border-radius: 4px;background: #f8f8f8;padding: 10px;margin: 10px;
							width: 100%;padding-right: 60px;;
	}
	.huifu-input{
		top: 10px;height: 73px;border-radius: 4px;display: flex;right: 10px;
		justify-content: center;align-items: center;
	}
	.top{
		width: 100%;height: 20px;background-color: antiquewhite;padding: 10px;text-align: right;
	}
.comment{
	width: 100%;z-index: 9;box-shadow: 0 0 3px #ccc;
	display: flex;flex-direction: row;justify-content: space-between;background: #fff;
	
}
.del{
	color: #666;font-size: 12px;margin-top: 3px;
}
.comment-left{
	flex-shrink: 0;display: flex;flex-direction: row;margin: 6px;
}
.comment-icon{
	display: flex;flex-direction: column;text-align: center;justify-content: center;
	align-items: center;margin: 0 6px;
}
.comment-icon text{
	font-size: 12px;color: #666
}
.comment-right{
	display: flex;justify-content: center;align-items: center;margin: 5px;margin-left: 10px;
}
.comment-input{
	background: #f1f1f1;flex: 1;padding: 8px 10px;border-radius: 25px;
	font-size: 12px;color: #666;display: flex;flex-direction: row;
}
</style>